JS事件冒泡与事件捕获

2023-11-05 09:21| 来源: 网络整理| 查看: 265

首页 > JavaScript JS事件冒泡与事件捕获在 JavaScript 中，我们将事件发生的顺序称为“事件流”，当我们触发某个事件时，会发生一些列的连锁反应，例如有如下所示的一段代码：

Click Me

如果给每个标签都定义事件，当我们点击其中的标签时，会发现绑定在和

标签上的事件也被触发了，这到底是为什么呢？为了解答这一问题，微软和网景两公司提出了两种不同的概念，事件捕获与事件冒泡：事件捕获：由微软公司提出，事件从文档根节点（Document 对象）流向目标节点，途中会经过目标节点的各个父级节点，并在这些节点上触发捕获事件，直至到达事件的目标节点；事件冒泡：由网景公司提出，与事件捕获相反，事件会从目标节点流向文档根节点，途中会经过目标节点的各个父级节点，并在这些节点上触发捕获事件，直至到达文档的根节点。整个过程就像水中的气泡一样，从水底向上运动。

提示：上面提到的目标节点指的是触发事件的节点。

后来，W3C 为了统一标准，采用了一个折中的方式，即将事件捕获与事件冒泡合并，也就是现在的“先捕获后冒泡”，如下图所示：图：事件捕获与事件冒泡事件捕获在事件捕获阶段，事件会从 DOM 树的最外层开始，依次经过目标节点的各个父节点，并触发父节点上的事件，直至到达事件的目标节点。以上图中的代码为例，如果单击其中的标签，则该事件将通过 document -> div -> p -> a的顺序传递到标签。示例代码如下： JavaScript div, p, a { padding: 15px 30px; display: block; border: 2px solid #000; background: #fff; } DIV

P A

P A

运行上面的代码，单击最内层的标签，运行结果如下图所示：图：事件冒泡演示阻止事件捕获和冒泡了解了事件捕获和事件冒泡后会发现，这个特性并不友好，例如我们在某个节点上绑定了事件，本想在点击时触发这个事件，结果由于事件冒泡，这个节点的事件被它的子元素给触发了。我们要如何阻止这样的事情发生呢？ JavaScript 中提供了 stopPropagation() 方法来阻止事件捕获和事件冒泡的发生，语法格式如下：

event.stopPropagation();

注意：stopPropagation() 会阻止事件捕获和事件冒泡，但是无法阻止标签的默认行为，例如点击链接任然可以打开对应网页。

示例代码如下： JavaScript div, p, a { padding: 15px 30px; display: block; border: 2px solid #000; background: #fff; } DIV

P A

function showAlert(event) { alert("您点击了 "+ this.tagName + " 标签"); event.stopPropagation(); } var elems = document.querySelectorAll("div, p, a"); for(let elem of elems) { elem.addEventListener("click", showAlert); } 此外，您也可以使用 stopImmediatePropagation() 方法来阻止同一节点的同一事件的其它事件处理程序，例如为某个节点定义了多个点击事件，当事件触发时，这些事件会按定义顺序依次执行，如果其中一个事件处理程序中使用了 stopImmediatePropagation() 方法，那么剩下的事件处理程序将不再执行。 stopImmediatePropagation() 方法的语法格式如下：

event.stopImmediatePropagation();

示例代码如下： JavaScript div, p, a { padding: 15px 30px; display: block; border: 2px solid #000; background: #fff; } DIV

P A

function sayHi() { alert("事件处理程序 1"); event.stopImmediatePropagation(); } function sayHello() { alert("事件处理程序 2"); } // 为 id 为 link 的标签定义多个点击事件 var link = document.getElementById("link"); link.addEventListener("click", sayHi); link.addEventListener("click", sayHello); 阻止默认操作某些事件具有与之关联的默认操作，例如当您单击某个链接时，会自动跳转到指定的页面，当您单击提交按钮时，会将数据提交到服务器等。如果不想这样的默认操作发生，可以使用 preventDefault() 方法来阻止，其语法格式如下：

event.preventDefault();

示例代码如下： JavaScript 链接 var link = document.getElementById("link"); link.addEventListener('click', function(event){ event.preventDefault(); // 阻止链接跳转 });

注意：IE9 及以下的版本不支持 preventDefault() 方法，对于 IE9 及以下的浏览器您可以使用 event.returnValue = false;。

关注公众号「站长严长生」，在手机上阅读所有教程，随时随地都能学习。内含一款搜索神器，免费下载全网书籍和视频。

微信扫码关注公众号

推荐阅读一套完整的嵌入式开发学习路线（高薪就业版）一套课程卖1万，TMD太贵了！跑了3000公里，见了一位大佬 Java数据类型转换：强制类型转换+自动类型转换云计算IaaS服务模式精讲 MySQL修改数据表的存储引擎迪杰斯特拉算法（求最短路径） Python Matplotlib 3D绘图详解（汇总）电容是什么什么是物联网

【本文地址】

JS事件冒泡与事件捕获

JS事件冒泡与事件捕获

今日新闻

推荐新闻